<template>
    <h1 style="text-align: center;color: blueviolet;">学生信息</h1>
    <table border="1" cellspacing="0" cellpadding="0" width="800" style="margin: 0 auto;">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>身高</th>
            <th>班级</th>
        </tr>
        <tr  v-for="item in students" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.gender }}</td>
            <td>{{ item.height }}</td>
            <td>{{ item.cls }}</td>
        </tr>
    </table>
  
</template>

<script>
export default {
    name:'studentvue',
    data() {
        return {
            students: {
                id:'',
                name:'',
                age:'',
                gender:'',
                height:'',
                cls:'',
            }
        }
    },
    mounted () {
        this.$axios.get('http://127.0.0.1:8000/app/students/')
        .then((result) => {
            console.log(result.data.data);
            this.students=result.data.data;
            console.log('数据获取成功');
        }).catch((err) => {
            console.log(err);
        });
    }

}
</script>

<style>

</style>